<script setup lang="ts">
import { useNotice } from "./hook";
import { formatFrindlyTime } from "@/utils/utils";
import { useRenderIcon } from "@/components/ReIcon/src/hooks";
import Refresh from "@iconify-icons/ep/refresh";
import Delete from "@iconify-icons/ep/delete";
import Select from "@iconify-icons/ep/select";

defineOptions({
  name: "Notice"
});

const tableRef = ref();
const { query } = useRoute();
const formRef = ref();
const {
  form,
  pagination,
  activeName,
  onSearch,
  loading,
  resetForm,
  dataList,
  onDel,
  onRead,
  handleCurrentChange,
  handleSizeChange
} = useNotice(tableRef, query.key as string);

const handleChange = val => {
  activeName.value = val;
  onSearch();
};
</script>

<template>
  <el-card shadow="never">
    <el-tabs v-model="activeName" @tab-change="handleChange">
      <el-tab-pane :label="$t('status.pureMessageNotify')" name="1" />
      <el-tab-pane :label="$t('status.pureSystemAnnouncement')" name="2" />
    </el-tabs>
    <el-form ref="formRef" inline :model="form">
      <el-form-item label="标题">
        <el-input
          v-model="form.title"
          placeholder="请输入标题"
          class="!w-[180px]"
          clearable
        />
      </el-form-item>
      <el-form-item label="是否已读">
        <el-select v-model="form.read" placeholder="请选择" class="!w-[180px]">
          <el-option label="已读" :value="true" />
          <el-option label="未读" :value="false" />
        </el-select>
      </el-form-item>
      <el-form-item>
        <el-button
          type="primary"
          :icon="useRenderIcon('ri:search-line')"
          :loading="loading"
          @click="onSearch"
        >
          {{ $t("buttons.pureSearch") }}
        </el-button>
        <el-button :icon="useRenderIcon(Refresh)" @click="resetForm(formRef)">
          {{ $t("buttons.pureReset") }}
        </el-button>
      </el-form-item>
      <div v-loading="loading">
        <div
          v-for="item in dataList"
          :key="item.id"
          class="flex mb-4 border-b border-slate-300 p-4 justify-between"
        >
          <el-badge :is-dot="!item.read">
            <el-avatar
              v-if="item.fromUser?.avatar"
              :size="30"
              :src="item.fromUser?.avatar"
              class="shrink-0"
            />
          </el-badge>
          <div class="ml-2 flex-1">
            <div class="text-sm">{{ item.fromUser.nickName }}</div>
            <div class="font-bold">{{ item.title }}</div>
            <div>{{ item.content }}</div>
          </div>
          <div
            class="ml-2 text-sm !w-[120px] flex flex-col justify-between items-end"
          >
            <div>{{ formatFrindlyTime(item.createdAt) }}</div>
            <el-button
              v-show="!item.read"
              link
              type="warning"
              :icon="useRenderIcon(Select)"
              @click="onRead(item.id)"
            >
              {{ $t("text.pureRead") }}
            </el-button>
            <el-button
              v-show="item.read"
              link
              type="danger"
              :icon="useRenderIcon(Delete)"
              @click="onDel(item.id)"
            >
              {{ $t("buttons.pureDelete") }}
            </el-button>
          </div>
        </div>
        <el-pagination
          v-if="pagination.total > 10"
          class="justify-end"
          :background="pagination.background"
          size="small"
          layout="prev, pager, next"
          :total="pagination.total"
          :page-size="pagination.pageSize"
          :current-page="pagination.currentPage"
          @current-change="handleCurrentChange"
        />
      </div>
    </el-form>
  </el-card>
</template>
